<template>
  <div>
    <div class="image-item" @click="previewImage(url)">
      <img :src="url" />
      <!-- 图片预览弹窗 -->
    </div>
    <cool-dialog
      v-model="showImagePreview"
      title="图片预览"
      :hiddenFooter="true"
      width="800px"
    >
      <div class="image-preview-container">
        <img :src="previewImageUrl" alt="预览图片" class="preview-image" />
      </div>
    </cool-dialog>
  </div>
</template>

<script>
import coolDialog from "@/components/CoolDialog.vue";
export default {
  components: {
    coolDialog,
  },
  data () {
    return {
      showImagePreview: false,
      previewImageUrl: "",
    };
  },
  props: {
    url: {
      type: String,
      default: "",
    },
  },
  methods: {
    previewImage (url) {
      this.previewImageUrl = url;
      this.showImagePreview = true;
    },
  },
  created () {},
};
</script>

<style lang="less" scoped>
.image-preview-container {
  width: 100%;
  text-align: center;

  .preview-image {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }
}
</style>
